<template>
  <div class="createSign">
      <div class="createSign-title">
        <h3><i></i>{{title}}</h3>
      </div>
      <div class="createSign-main">
        <div class="file-message-box">
          <div class="file-pic">
            <div class="file-pic-title">
              {{fileName}}
            </div>
            <img class="ht-pic" src="@/assets/image/xiangqing.png">
          </div>
          <div class="file-message">
            <div class="file-message-item">
              <span>文件名称：</span>
              <el-input size="small" v-model="fileName" placeholder="请输入内容"></el-input>
            </div>
            <div class="file-message-item">
              <span>文件编号：</span>
              <i>{{fileNumber}}</i>
            </div>
            <div class="file-message-item">
              <span>文件大小：</span>
              <i>{{fileSize}}</i>
            </div>
          </div>
        </div>
      </div>
      <div class="next-btn">
        <el-button type="primary" size="small" @click="nextPage">{{nextTitle}}</el-button>
        <el-button plain size="small" @click="backPage">{{backTitle}}</el-button>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '发起签署',
      nextTitle: '提交审核',
      fileName: '贷款服务合同.doc',
      pdfUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      backTitle: '取消',
      fileNumber: '20200830-123456',
      fileSize: '2页  |  77.0k'
    }
  },
  methods: {
    nextPage () {
      this.$router.push('/loanProducts')
    },
    backPage () {
      this.$router.push('/loanProducts')
    }
  }
}
</script>

<style scoped>
.createSign{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 10;
}
.createSign-title {
  height: 70px;
}
.createSign-title i{
  width: 4px;
  height: 16px;
  background: #5290FF;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.createSign-title h3{
  margin: 0 37px;
  padding-left: 20px;
  font-size: 18px;
  line-height: 70px;
  font-weight: bold;
  border-bottom: 1px solid rgba(187, 187, 187, 0.43);
}
.next-btn{
  display: flex;
  justify-content: center;
}
.next-btn >>> .el-button--primary{
  margin-right: 24px;
}
.file-message-box{
  margin: 0 37px;
  padding-left: 28px;
  padding-top: 22px;
  display: flex;
  border-bottom: 1px solid rgba(187, 187, 187, 0.43);
  padding-bottom: 18px;
  margin-bottom: 338px;
}
.file-pic{
  width: 384px;
  height: 341px;
  border-radius: 4px 4px 4px 4px;
  background-color: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 53px;
}
.file-pic-title{
  height: 40px;
  margin: 0 4px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(187, 187, 187, 0.38)
}
.file-pic-pdf{
  height: 300px;
  position: relative;
}
.file-pic-pdf >>> canvas{
  width: 200px !important;
  height: 280px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.file-message{
  padding-top: 10px;
}
.file-message-item {
  display: flex;
  margin-bottom: 21px;
  align-items: center;
}
.file-message-item span{
  display: block;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-weight: bold;
  margin-right: 20px;
  white-space: nowrap;
}
.file-message-item i{
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-style: normal;
}
.file-message-item >>> .el-input{
  width: 360px;
  height: 35px;
  font-size: 14px;
  color: rgba(144, 147, 153, 1);
}
.ht-pic{
  height: 280px;
  width: 200px;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
